<template>
	<view style="padding-bottom: 180rpx;">
		<!-- <page-head :title="'团队教练'" :headtype="1"></page-head> -->
		<view class="topblock">
			<view class="search">
				<view class="searchmain marginAuto flex">
					<uv-icon style="margin-top:6rpx;" @click="searchfun" name="search" size="30" color="#999999"></uv-icon>
					<input class="searchinput" type="text" v-model="searchtxt" placeholder="请输入学员姓名/手机号进行搜索" />
				</view>
			</view>
			<view class="statistics marginAuto flex">
				<view class="statisticsq" style="left:-20rpx;"></view>
				<view class="statisticsq" style="right:-20rpx;"></view>
				<view class="statisticseach">
					<view class="statisticsnum">{{ teammsg.coach_count }}</view>
					<view class="statisticstitle">教练数</view>
				</view>
				<view class="statisticseach">
					<view class="statisticsnum">{{ teammsg.this_month_assign_user_count }}</view>
					<view class="statisticstitle">本月分配</view>
				</view>
				<view class="statisticseach">
					<view class="statisticsnum">{{ teammsg.this_month_user_count }}</view>
					<view class="statisticstitle">总学员</view>
				</view>
				<view class="statisticseach">
					<view class="statisticsnum">{{ teammsg.user_study_count }}</view>
					<view class="statisticstitle">教学中</view>
				</view>
			</view>
		</view>
		<view class="teamlist">
			<view class="teamitem" v-for="(item,index) in datas" :key="index">
				<view class="jlitem marginAuto flex" v-if="item.is_pay == 1">
					<view class="jlitembtn mainBg baiColor" @click="navigate('/pages/team/teamxq')">查看</view>
					<view class="jlitemimg">
						<image v-if="!item.avatar" src="@/static/logo.png" mode=""></image>
						<image v-if="item.avatar" :src="apifun.URLimg+item.avatar" mode=""></image>
					</view>
					<view class="jlitemmsg">
						<view class="jlitemm-name flex">
							<view class="jlitemm-namem">{{ item.username }}</view>
							<view class="jlq">{{ item.mobile }}</view>
						</view>
						<view class="msg flex">
							<view class="msgeach flex">
								<view class="msgeachy"></view>
								<view class="msgeachtxt">总学员：{{ item.total_order }}</view>
							</view>
							<view class="msgeach flex">
								<view class="msgeachy"></view>
								<view class="msgeachtxt">未启动：{{ item.no_start_order }}</view>
							</view>
						</view>
						<view class="msg flex">
							<view class="msgeach flex">
								<view class="msgeachy"></view>
								<view class="msgeachtxt">教学中：{{ item.study_order }}</view>
							</view>
							<view class="msgeach flex">
								<view class="msgeachy"></view>
								<view class="msgeachtxt">已结束：{{ item.end_order }}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="user marginAuto flex" v-if="item.is_pay != 1">
					<view class="useravatar">
						<image v-if="!item.avatar" src="@/static/logo.png" mode=""></image>
						<image v-if="item.avatar" :src="apifun.URLimg+item.avatar" mode=""></image>
					</view>
					<view class="userr">
						<view class="userrname">{{ item.username }}  {{ item.mobile }}</view>
						<view class="userrtime">{{ item.create_time }}</view>
						<view class="userrbzj">待交保证金</view>
					</view>
					<view class="userbtn mainBg baiColor" @click="$refs.guarantee.open();acitem=item;acindex=index">交保证金</view>
				</view> -->
			</view>
		</view>
		<view class="createjl marginAuto" style="width:600rpx" v-if="usermsg.is_team_leader != 1">
			<uv-button text="请线下联系管理员创建自己的团队" :customStyle="{
				'background':'#0E71EB',
				'color':'#ffffff',
				'font-size':'30rpx',
				'width':'600rpx',
				'height':'100rpx',
				'border-radius':'20rpx'
			}"></uv-button>
		</view>
		<view class="createjl marginAuto" style="width:600rpx" v-if="usermsg.is_team_leader == 1">
			<uv-button text="创建健带教教练" @click="createjl()" :customStyle="{
				'background':'#0E71EB',
				'color':'#ffffff',
				'font-size':'30rpx',
				'width':'600rpx',
				'height':'100rpx',
				'border-radius':'20rpx'
			}"></uv-button>
		</view>
		<!-- 缴纳保证金 -->
		<uv-popup ref="guarantee" bgColor="none" round="20">
			<view class="closetest">
				<image class="closetestbg" :src="apifun.serveimg+'closetestbg.png'" mode=""></image>
				<view class="closetesttitle" style="font-weight: 600;padding-top:60rpx;">缴纳保证金</view>
				<view class="closetestdoc" style="margin-top:30rpx;">确定教练{{ acitem.username }}缴纳保证金</view>
				<view class="closetestbtn flex">
					<view class="closetestbtne mainColor" style="background: #ffffff;" @click="$refs.guarantee.close()">取消</view>
					<view class="closetestbtne mainBg baiColor" @click="enterguaranteefun">确定</view>
				</view>
			</view>
		</uv-popup>
		<!-- 创建教练 -->
		<uv-popup ref="isshowjl" mode="bottom" round="20" @close="$refs.isshowjl.close()">
			<view class="selectblock">
				<view class="buypopuptop">
					<view class="selectclose" @click="$refs.isshowjl.close()">
						<uv-icon size="26" color="#3D3D3D" name="close"></uv-icon>
					</view>
					<view class="selecttitle marginAuto">创建教练</view>
				</view>
				<view class="createjlmsg">
					<view class="createjleach flex marginAuto">
						<view class="createjltitle">教练姓名：</view>
						<view class="createjlinput">
							<input type="text" v-model="jlname" placeholder="请输入教练姓名">
						</view>
					</view>
					<view class="createjleach flex marginAuto">
						<view class="createjltitle">手机号：</view>
						<view class="createjlinput">
							<input type="text" v-model="jlphone" placeholder="请输入教练手机号">
						</view>
					</view>
					<view class="marginAuto" style="width:600rpx;margin-top:40rpx;">
						<uv-button text="提交" @click="createenterfun" :customStyle="{
							'background':'#0E71EB',
							'color':'#ffffff',
							'font-size':'30rpx',
							'width':'600rpx',
							'height':'100rpx',
							'border-radius':'20rpx'
						}"></uv-button>
					</view>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
	import wxSDK from '../../public/wxSDK';
	export default {
		data() {
			return {
				apifun:this.apifun,
				page:1,
				searchtxt:'',
				usermsg:{},
				teammsg:{},
				datas:[],
				jlname:'',
				jlphone:'',
				acitem:{},
				acindex:'',
			};
		},
		onLoad() {
			this.usermsg = uni.getStorageSync('usermsg');
			this.initData();
			this.teammsgfun();
		},
		methods: {
			searchfun(){
				this.page = 1;
				this.datas = [];
				this.initData();
			},
			initData(){
				let sendData = {
					page:this.page,
					limit:this.apifun.limit,
					search:this.searchtxt
				};
				this.apifun.unirequest('/coach/user/getTeamUserList','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						if(datas.data.length <= 0){
							this.page--;
							return false
						}
						this.datas = [...this.datas,...datas.data];
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			
			createjl(){ // 创建健带教教练
				this.$refs.isshowjl.open();
			},
			createenterfun(){  // 创建带教教练确认
				let sendData = {
					mobile:this.jlphone,
					name:this.jlname
				};
				this.apifun.unirequest('/coach/order/createCoach','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.$refs.isshowjl.close();
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			enterguaranteefun(){  // 交保证金确定
				if(!wxSDK.isWechat()){
					return false
				}
				let sendData = {
					id:this.acitem.id
				};
				this.apifun.unirequest('/coach/order/pay','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.$refs.guarantee.close();
						this.wxpay(datas)
					}else if(res.code == 10002){  // 未授权
						this.apifun.navigate('/pages/start/fenglogo','sqtype=2')
					}else{
						this.apifun.toast(res.msg)
					}
				})
				
			},
			teammsgfun(){
				this.apifun.unirequest('/coach/user/getTeamUser','post',{},(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.teammsg = datas;
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			navigate(urls,params){
				this.apifun.navigate(urls,params)
			},
			wxpay(datas,ordermsg){  // 微信支付
				let that = this;
				function onBridgeReady() {
					WeixinJSBridge.invoke('getBrandWCPayRequest', {
						"appId": datas.appId, //公众号ID，由商户传入     
						"timeStamp": datas.timeStamp, //时间戳，自1970年以来的秒数     
						"nonceStr": datas.nonceStr, //随机串     
						"package": datas.package,
						"signType": datas.signType, //微信签名方式：     
						"paySign": datas.paySign, //微信签名 
					},
					function(datas) {
						if (datas.err_msg == "get_brand_wcpay_request:ok") {
							that.apifun.toast("支付成功");
							setTimeout(()=>{
								this.page = 1;
								this.datas = [];
								this.initData();
							},1500)
						}
					});
				}
				if (typeof WeixinJSBridge == "undefined") {
					if (document.addEventListener) {
						document.addEventListener(
							'WeixinJSBridgeReady', onBridgeReady,
							false);
					} else if (document.attachEvent) {
						document.attachEvent('WeixinJSBridgeReady',
							onBridgeReady);
						document.attachEvent('onWeixinJSBridgeReady',
							onBridgeReady);
					}
				} else {
					onBridgeReady();
				}
			},
		},
		onPullDownRefresh() {
			this.page = 1;
			this.datas = [];
			this.initData();
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			this.page++;
			this.initData()
		},
	};
</script>

<style scoped lang="scss">
	@import '../../public/alert.scss';
	.topblock{
		position: sticky;
		top: 0;
		z-index: 100;
		width: 100%;
		background: #F7F7F7;
	}
	// 搜索
	.search{
		width: 100%;
		padding: 20rpx 0;
		.searchmain{
			width: 630rpx;
			height: 50rpx;
			padding:20rpx 30rpx;
			border-radius: 100rpx;
			background: #F3F9FF;
			.searchinput{
				width: 80%;
				height: 50rpx;
				line-height: 50rpx;
				margin-left: 20rpx;
				font-size: 28rpx;
			}
		}
	}
	// 统计
	.statistics{
		position: relative;
		width: 690rpx;
		padding: 30rpx 0;
		background:#E4EFFF;
		border-radius:10rpx;
		margin-top: 20rpx;
		overflow: hidden;
		justify-content: space-around;
		.statisticsq{
			position: absolute;
			top: 70rpx;
			width:40rpx;
			height: 40rpx;
			background: #ffffff;
			border-radius: 50%;
		}
		.statisticseach{
			width: 30%;
			text-align: center;
			.statisticsnum{
				color: #1177F4;
				font-size:40rpx;
				line-height: 60rpx;
			}
			.statisticstitle{
				font-size: 24rpx;
				color: #333333;
				line-height: 60rpx;
			}
		}
	}
	// 列表
	.teamitem{
		.jlitem{
			position: relative;
			margin-top: 20rpx;
			width:690rpx;
			padding:10rpx 0;
			background: #fff;
			border-radius: 10rpx;
			.jlitembtn{
				position: absolute;
				top: 40rpx;
				right: 30rpx;
				width: 130rpx;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 10rpx;
				font-size:30rpx;
				text-align: center;
			}
			.jlitemimg{
				width: 150rpx;
				height: 220rpx;
				image{
					width: 150rpx;
					height: 220rpx;
					border-radius: 6rpx;
				}
			}
			.jlitemmsg{
				margin-left: 24rpx;
				width: 80%;
				.jlitemm-name{
					margin: 30rpx 0 20rpx;
					.jlitemm-namem{
						color: #222222;
						font-size: 30rpx;
						line-height:40rpx;
						margin-right: 10rpx;
					}
					.jlq{
						display: inline-block;
						padding:0 10rpx;
						background:#EAF1FF;
						color:#1686F8;
						font-size:20rpx;
						border-radius:6rpx;
						height:40rpx;
						line-height:40rpx;
						margin-right: 10rpx;
					}
				}
				.msg{
					.msgeach{
						width: 50%;
						margin-top:10rpx;
						.msgeachy{
							width: 20rpx;
							height: 20rpx;
							border-radius: 100%;
							border: 1px solid #0E71EB;
							margin-top: 18rpx;
							margin-right: 10rpx;
						}
						.msgeachtxt{
							line-height:60rpx;
							font-size: 28rpx;
							color: #333333;
						}
					}
				}
			}
		}
		.user{
			position: relative;
			width: 650rpx;
			padding: 20rpx;
			background: #fff;
			.useravatar{
				width: 136rpx;
				height: 136rpx;
				image{
					width: 136rpx;
					height: 136rpx;
					border-radius: 50%;
				}
			}
			.userr{
				width: 80%;
				margin-left: 20rpx;
				.userrname{
					line-height: 60rpx;
					font-size:30rpx;
					color: #333333;
				}
				.userrtime{
					font-size: 24rpx;
					color: #666666;
					line-height:36rpx;
				}
				.userrbzj{
					font-size:24rpx;
					color: #0E71EB;
					line-height:40rpx;
				}
			}
			.userbtn{
				position: absolute;
				right: 10rpx;
				bottom: 20rpx;
				width: 160rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				font-size:28rpx;
				border-radius:10rpx;
			}
		}
	}
	.createjl{
		position:sticky;
		margin-top: 200rpx;
		bottom:50rpx;
	}
	// 创建教练弹窗
	.selectblock {
		height:500rpx;
		overflow-y: scroll;
		position: relative;
		background: #F7F7F7;
		padding-bottom: 140rpx;
	}
	.buypopuptop{
		position: sticky;
		top: 0;
		left: 0;
		z-index: 30;
		border-radius: 20rpx;
		background: #F7F7F7;
		.selectclose{
			position: absolute;
			right:40rpx;
			top:40rpx;
		}
		.selecttitle {
			width: 100%;
			height: 110rpx;
			line-height: 110rpx;
			background-color: #fff;
			text-align: center;
			color: #333333;
			font-size: 32rpx;
		}
	}
	.createjlmsg{
		.createjleach{
			width: 690rpx;
			margin-top: 20rpx;
			.createjltitle{
				width: 170rpx;
				line-height: 100rpx;
				font-size: 30rpx;
				color: #333333;
			}
			.createjlinput{
				width: 70%;
				height: 100rpx;
				background:#fff;
				border-radius: 20rpx;
				input{
					width:90%;
					padding:0 5%;
					height: 100rpx;
					line-height: 100rpx;
					
				}
			}
		}
	}
</style>